<template>
    <div class="box">
        <el-container>
            <div class="header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">用户列表</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">设备列表</a></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div>
                <h3>基础信息</h3>
                <el-table :data="tableUserData">
                    <el-table-column :prop="index" :key="index" :label="item" v-for="(item, index) in tableUser">
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <h3>账户信息</h3>
                <el-table :data="tableAccountData">
                    <el-table-column :prop="index" :key="index" :label="item" v-for="(item, index) in tableAccount">
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <h3>车辆情况</h3>
                <!-- <div class="search">
                    <el-input class="length right" v-model="name" size="large" clearable placeholder="车牌号码" />
                    <el-input class="length right" v-model="phone" size="large" clearable placeholder="绑定时间" />
                    <el-button class="height" type="primary">查询</el-button>
                    <el-button class="height">重置</el-button>
                </div> -->
                <el-table :data="tableHeaderData">
                    <el-table-column :prop="index" :key="index" :label="item" v-for="(item, index) in tableHeader">
                    </el-table-column>
                    <!-- <el-table-column label="操作">
                        <el-button size="small" type="success">查看详情</el-button>
                        <el-button size="small" type="primary">...</el-button>
                    </el-table-column> -->
                </el-table>
            </div>
            <!-- <el-footer>
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="40" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </el-footer> -->
            <div>
                <h1>订单记录</h1>
                <!-- <div class="search">
                    <el-input class="length right" v-model="name" size="large" clearable placeholder="订单编号" />
                    <el-input class="length right" v-model="phone" size="large" clearable placeholder="车牌号码" />
                    <el-input class="length right" v-model="phone" size="large" clearable placeholder="绑定时间" />
                    <el-select v-model="value" class="m-2 right" clearable placeholder="订单状态" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-button class="height" type="primary">查询</el-button>
                    <el-button class="height">重置</el-button>
                </div> -->
                <el-table :data="tableOrderData">
                    <el-table-column :prop="index" :key="index" :label="item" v-for="(item, index) in tableOrder">
                    </el-table-column>
                </el-table>
                <!-- <el-footer>
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="40" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </el-footer> -->
            </div>
        </el-container>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { feedbackList } from "../http/api";
const name = ref("");
const phone = ref("");
const accountType = ref("");
const value = ref("");

const tableAccount:any=ref({
    carNum: "绑定车辆数",
    orderNum: "未交费订单",
    money:"消费金额",
    noorderNum: "未交费订单",
    nomoney:"未交费金额"

})
const tableUser:any=ref({
    id:"ID",
    phone:"手机号码",
    wechatStatus: "微信绑定",
    status: "状态",
    registrationTime: "注册时间",
    registrationTime1: "登录时间"
});
const tableHeader: any = ref({
    licenseNumber: "车牌号码",
    licenseType: "车牌类型",
    orderNum: "订单数量",
    orderPaid: "待缴费订单",
    money: "消费金额",
    noMoney: "待消费金额",
    bindingTime: "绑定时间"
});
const tableOrder: any = ref({
    id: "订单编号",
    submissionTime: "提交时间",
    carNum1: "车牌号码",
    orderMon: "订单金额",
    orderState: "订单状态",
    payMethod: "支付方式",

});
let tableData: any = reactive([]);

let tableUserData=[{
    id:"1",
    phone:"13415672456",
    wechatStatus: "1",
    status: "0",
    registrationTime: "2022-11-25 11:43:30",
    registrationTime1: "2022-11-25 13:43:30"
}];

let tableOrderData=[{
    id: "1",
    submissionTime: "2022-11-25 13:43:30",
    carNum1: "川S13132",
    orderMon: "6666",
    orderState: "已支付",
    payMethod: "支付宝",
},
{
    id: "1",
    submissionTime: "2022-11-25 13:43:30",
    carNum1: "川S13132",
    orderMon: "66",
    orderState: "已支付",
    payMethod: "支付宝",
}];
let tableHeaderData=[{
    licenseNumber: "川S13132",
    licenseType: "车牌类型",
    orderNum: "1",
    orderPaid: "1",
    money: "666",
    noMoney: "0",
    bindingTime: "2022-11-25 13:43:30"
}]
let tableAccountData=[{
    carNum: "1",
    orderNum: "3",
    money:"666",
    noorderNum: "1",
    nomoney:"0"
}]

const currentPage4 = ref(1);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
};
</script>
<style scoped>
.box{
    display: flex;
    width: 100%;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    margin: 10px 0;
}

.length {
    width: 200px;
}

.right {
    margin-right: 10px;
}

.height {
    height: 38px !important;
}

.search {
    display: flex;
    align-items: center;
    margin: 0 0 12px 12px;
}
</style>